<template>
  <div class="account-center-warp">
    <div class="content">
      <div class="flex-box flex-wrap">
        <div class="account-info" style="background: #fff">
          <AccountInfo></AccountInfo>
        </div>
        <div class="account-other-warp">
          <AccountCard></AccountCard>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 780px) {
  .account-info {
    flex: 1 !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 780px) and (max-width: 1100px) {
  .account-info {
    flex: 1 !important;
    margin-right: 20px !important;
    margin-bottom: 20px;
  }
  .account-other-warp {
    min-width: auto !important;
  }
}
.account-center-warp {
  padding: 8px;
  background: #f0f2f5;
  .content {
    padding: 8px;
    border-radius: 4px;
  }
  .account-info {
    height: 700px;
    min-width: 362px;
    margin-right: 20px;
  }
  .account-other-warp {
    flex: 1;
    min-width: 362px;
    height: 700px;
  }
}
</style>
<script setup lang="ts">
import AccountInfo from "@/components/pages/AccountInfo.vue";
import AccountCard from "@/components/pages/AccountCard.vue";
</script>
